<template>
	<view>
		<!-- 70*70/100 Math.round -->
		<view v-if="!data.kuiper_data.length" style="position: relative;">
			<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/40.png" mode="widthFix" style="width: 100%; height: auto;"></image>
			<view style="position: absolute; top: 25%; left: 0; width: 100%; text-align: center;">
				<view style="font-size: 16px;">柯伊伯大数据分析系统<text style="color: #F21B1B;">已提前锁定</text>本场方向</view>
				<view style="font-size: 20px; font-weight: bold; margin-top: 25px;">平台战绩近</view>
				<view style="font-size: 32px; font-weight: bold; color: #F21B1B;">10中{{data.kuiper_data_num}}</view>
				<view style="font-size: 18px; font-weight: bold; color: #F21B1B; margin-top: 40px;">解锁可查看</view>
			</view>
		</view>
		<view v-if="data.kuiper_data.length">
			<view class="wrap Grid Grid--center Grid--justifyCenter" style="margin-bottom: 10px;">
				<view class="box boxA" :style="{width: `${Math.round(data.kuiper_data[0].bar*70/100)}%`}">
					<text
						style="position: absolute; left: -28px; top: -4px; color: rgb(153, 153, 153);">{{data.kuiper_data[0].bar}}%</text>
				</view>
				<view class="box boxB" :style="{width: `${Math.round(data.kuiper_data[1].bar*70/100)}%`}">
					<text
						style="position: absolute; right: -28px; top: -4px; color: rgb(153, 153, 153);">{{data.kuiper_data[1].bar}}%</text>
				</view>
			</view>
			<view style="position: relative;">
				<view id="chartCanvas" style="width: calc(100vw - 62px); height: 220px; margin: 0 auto;"></view>
			</view>
			<view class="Grid Grid--center Grid--justifyCenter text-xs" @click="isKuiperInfo = true">
				<view>柯伊伯大数据分析结果</view>
				<u-icon name="question-circle-fill" color="#f9ae3d"></u-icon>
			</view>
		</view>
		<!-- 柯伊伯大数据分析功能说明 -->
		<u-modal :show="isKuiperInfo" confirmText="确定" @confirm="() => isKuiperInfo = false">
			<view class="slot-content">
				<view class="text-sm" style="line-height: 24px; white-space: normal; text-align: left;">
					<view style="text-indent: 24px;">柯伊伯大数据分析，是一套结合Ai以及大数据的体育分析系统。</view>
					<view style="text-indent: 24px;">
						通过对主客队双方历史数据、机构看法以及万场以上比赛在云端进行大数据清洗和分析，客观公正的展示主客队双方实力差距以及机构真实看法。</view>
					<view class="text-center">（结果仅作参考，不代表推荐内容）</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: "radar-chart",
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				chartInstance: null,
				isKuiperInfo: false
			}
		},
		computed: {

		},
		mounted() {
			if (this.data.kuiper_data.length) this.initChart()
		},
		methods: {
			async initChart() {
				// 等待 canvas 元素渲染完成（对于 H5 环境可能需要）
				await this.$nextTick();
				// 获取 canvas 元素
				var chartDom = document.getElementById('chartCanvas');
				// 初始化 ECharts 实例
				this.chartInstance = echarts.init(chartDom);
				var stages = [{
						name: '进球',
						max: 100
					},
					{
						name: '防守',
						max: 100
					},
					{
						name: '价值',
						max: 100
					},
					{
						name: '状态',
						max: 100
					},
					{
						name: '热度',
						max: 100
					},
					{
						name: '历史',
						max: 100
					}
				];
				var scores = [{
					name: '主队',
					value: this.data.kuiper_data[0].value
				}, {
					name: '客队',
					value: this.data.kuiper_data[1].value
				}];

				function contains(arr, obj) {
					var i = arr.length;
					while (i--) {
						if (arr[i].name === obj) {
							return i;
						}
					}
					return false;
				}
				let option = {
					backgroundColor: '#ffffff',
					color: ['#bccf90', '#f6a09a'],
					legend: {
						top: 0,
						right: 0,
						icon: 'rect',
						itemWidth: 17, // 图例标记的图形宽度。[ default: 25 ]
						itemHeight: 12, // 图例标记的图形高度。[ default: 14 ]
						itemGap: 9, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
						textStyle: {
							fontSize: 12,
							color: '#4c4c4c',
						},
						data: ['主队', '客队'],
					},
					radar: {
						radius: '70%',
						splitNumber: 4,
						triggerEvent: true,
						// name: {
						//   textStyle: {
						//     color: '#4c4c4c',
						//     fontSize: '16',
						//     borderRadius: 3,
						//     padding: [3, 5],
						//   },
						// },
						name: {
							rich: {
								a: {
									fontSize: 12,
									color: '#4c4c4c',
									// lineHeight: '40',
									align: 'center',
									padding: [0, 0, 2, 0],
								},
								b: {
									color: '#bccf90',
									fontSize: 12,
									align: 'center',
									padding: [0, 0, 0, 0],
								},
								c: {
									color: '#4c4c4c',
									align: 'center',
									padding: [0, 0, 0, 0],
									fontSize: 12,
								},
								d: {
									color: '#f6a09a',
									fontSize: 12,
									align: 'center',
									padding: [0, 0, 0, 0],
								},
								triggerEvent: true,
							},
							formatter: (a) => {
								let i = contains(stages, a); // 处理对应要显示的样式
								return `{a| ${a}}\n{b| ${scores[0]['value'][i]}}{c| /}{d| ${scores[1]['value'][i]}}`;
							},
						},
						nameGap: '2',
						indicator: stages,
						splitArea: {
							areaStyle: {
								// color: [
								// 	// '#172C65' ,'#122454','#0A1835',

								// 	'rgba(39,67,143, 0.1)',
								// 	'rgba(39,67,143, 0.2)',
								// 	'rgba(39,67,143, 0.4)',
								// 	'rgba(39,67,143, 0.6)',
								// 	'rgba(39,67,143, 0.8)',
								// 	'rgba(39,67,143, 1)',
								// ].reverse(),
							},
						},
						// 展示刻度
						// axisLabel:{
						//     show: true,
						// 	inside: true,
						// 	showMinLabel: false,
						// 	showMaxLabel: false
						// },
						axisLine: {
							//指向外圈文本的分隔线样式
							lineStyle: {
								color: 'rgba(0,0,0,0.6)',
							},
						},
						splitLine: {
							lineStyle: {
								width: 1,
								color: ['rgba(45,65,110, 0.2)'].reverse(),
							},
						},
					},
					// 	polar: {
					// 		radius: '70%',
					// 	},
					// 	angleAxis: {
					// 		zlevel: 0,
					// 		min: 0,
					// 		max: 360,
					// 		interval: 4,
					// 		clockwise: false,
					// 		axisTick: {
					// 		    show: false
					// 		},
					// 		axisLabel: {
					// 		    show: false
					// 		},
					// 		axisLine: {
					// 		    show: false
					// 		},
					// 		splitLine: {
					// 		    show: false
					// 		}
					// 	},
					// 	radiusAxis: {
					// 		zlevel: 0,
					// 		min: 0,
					// 		max: 100,
					// 		axisLabel: {
					// 			textStyle: {
					// 				// color: 'rgba(29,208,240,.5)'
					// 				color: 'rgb(153, 153, 153)'
					// 			}
					// 		},
					// 		axisLine: {
					// 			show: false
					// 		},
					// 		splitLine: {
					// 			show: false
					// 		},
					// 		splitArea: {
					// 			show: false
					// 		},
					// 	},
					series: [{
							name: '',
							type: 'radar',
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										1,
										0,
										0,
										[{
												offset: 0,
												// color: '#37c5f4',
												color: '#bccf90',
												opacity: 1,
											},
											{
												offset: 1,
												// color: '#19469a',
												color: '#bccf90',
												opacity: 1,
											},
										],
										false
									),
								},
							},
							symbolSize: 0,
							lineStyle: {
								normal: {
									color: '#bccf90',
									width: 1,
								},
							},
							data: [scores[0]],
						},
						{
							name: '',
							type: 'radar',
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										1,
										0,
										0,
										[{
												offset: 0,
												// color: '#ffc40b',
												color: '#f6a09a',
											},
											{
												offset: 1,
												// color: '#e3c424',
												color: '#f6a09a',
											},
										],
										false
									),

									opacity: 0.6,
								},
							},
							symbolSize: 0,
							lineStyle: {
								normal: {
									// color: 'rgba(255,292,203, 0.6)',
									color: '#f6a09a',
									width: 1,
								},
							},
							data: [scores[1]],
						},
					],
				};
				this.chartInstance.setOption(option);
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		color: #fff;
	}

	.box {
		height: 10px;
		position: relative;
		border-radius: 4px;
		font-size: 12px;
	}

	.boxA {
		// background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);
		background: linear-gradient(180deg, #bccf90 0%, #D6E3B8 100%);
		margin-right: 30px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
	}

	.boxA::before {
		content: "";
		display: block;
		width: 30px;
		height: 10px;
		position: absolute;
		top: 0;
		right: -16px;
		// background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);
		background: linear-gradient(180deg, #bccf90 0%, #D6E3B8 100%);
		z-index: 1;
		transform: skew(-20deg);
		border-radius: 3px;
	}

	.boxB {
		// background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);
		background: linear-gradient(180deg, #f6a09a 0%, #F7B9B5 100%);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.boxB::after {
		content: "";
		display: block;
		width: 30px;
		height: 10px;
		position: absolute;
		top: 0;
		left: -10px;
		// background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);
		background: linear-gradient(180deg, #f6a09a 0%, #F7B9B5 100%);
		z-index: 1;
		transform: skew(-20deg);
		border-radius: 2px;
	}
</style>